<template>
    <div class="list" >
      <ul>
        <li v-for="f in foodlist">
          <div class="ls-img"><img :src="f.pic" alt=""></div>
          <div class="ls-info">
            <h4 class="title">{{f.title}}</h4>
            <p>{{f.dosing}}</p>
            <div class="users-name">
              <span class="net-name">{{f.users}}</span>
              <div class="ls-browse">
                <a href="#"><i>{{f.pview}}</i>评论</a>
                <a href="#">/<i>{{f.collect}}</i>赞</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
 </template>
 <script type="text/ecmascript-6">
        export default{
            props:["foodlist"]
        }
 </script>
 <style scoped>
 .list{
     width: 100%;
     background: #fff;
   }
   .ls-content-wrapper .list ul{
     padding:0.1rem 0.1rem 0;
   }
   .ls-content-wrapper .list ul li{
     display: -webkit-flex;
     -webkit-align-items: center;
     padding-bottom: 0.1rem;
     margin-top: 0.1rem;
     border-bottom: 1px solid #eaeaea;
   }
   .ls-content-wrapper .list li .ls-info{
     font-size:12px;
     margin-left: 0.15rem;
   }
   .ls-content-wrapper .list li .ls-info .title{
     font-size:16px;
     line-height: 0.3rem;
     color: #333;
     width:2.1rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .ls-content-wrapper .list li .ls-info p{
     width:2.1rem;
     line-height: 0.22rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     color: #444;
   }
   .ls-content-wrapper .list li .ls-info .users-name{
     display: -webkit-flex;
     align-items: center;
     justify-content: space-between;
     font-size:12px;
   }
   .ls-content-wrapper .list li .ls-info .net-name{
     line-height: 0.22rem;
     color:#999;
   }
   .ls-browse a{
     color: #373737;
   }

   .ls-content-wrapper .list li img{
     width:1.22rem;
     height: 0.92rem;
     display: block;
   }
 </style>
